<template>
    <div class="goodTypesContainer">
        <div class="type">
            <el-tree
            :data="data"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                <!-- v-if="node.parent.label == null" -->
                <el-button
                    type="text"
                    size="mini"
                    @click="() => append(data)">
                    添加
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)">
                    删除
                </el-button>
                </span>
            </span>
            </el-tree>
            <el-button
                    type="text"
                    size="mini"
                    @click="() => append({'id':'0'})">
                    添加顶级列表
                </el-button>
        </div>
    </div>
</template>

<script>
import goodType from '@/api/goodType'
import yunduo from '@/utils/yuduo'
export default {
  data() {
    return {
        data : [{
            id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 1-1',
            }]
        }],
        children:{
            parentId:'',
            label: '',
        },
        dialogFormVisible:'false'
    }
  },
  created(){
    this.init();
  },
  methods: {
    //添加类型
    async append(data) {
        var label = await
          this.$prompt("请输入类型名称", '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                  }).then(({ value }) => {
                      return value;
                  }).catch(() => {
                      this.$message({
                      type: 'info',
                      message: '取消输入'
                      });
                  });
        if(label == null || label.length == 0){
            return;
        }
        var parentId = data.id;
        var newId;
        await goodType.add({'parentId':parentId,'type':label})
          .then(response=>{
              this.$message({
                  message: '添加成功',
                  type: 'success'
              });
              newId = response.data.id;
          })
        if(data.id == '0'){
            this.init();
        }
        const newChild = { id: newId, 'label': label, children: [] };
        if (!data.children) {
        this.$set(data, 'children', []);
        }
        data.children.push(newChild);
    },
    init(){
        goodType.getData()
            .then(response=>{
                this.data = response.data.list;
            })
    },
    remove(node, data) {
      var id = data.id;
      goodType.delete(id)
        .then(response=>{
            this.$message({
                  message: '删除成功',
                  type: 'success'
              });
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        })
    },
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.goodTypesContainer {
}
.type{
    width: 50%;
    padding-left: 10%;
    padding-top: 10%;
}
</style>